<template>
  <CommonTable
    ref="commonTable"
    :is-select="true"
    :columns="columns"
    :dataSource="dataSource"
    :total="dataSource.length"
    :isLoading="isLoading"
    @getPageParams="getPageParams"
    @get-table-sort="getTableSort"
    @getSelectColumn="getSelectColumn"
  >
    <template v-slot:bodyCell="{ scope }">
      <span v-if="scope.column.key !== 'action'">{{ scope.value }}</span>
      <span v-else-if="scope.column.key === 'action'">
        <i class="details" type="primary" @click="onView(scope.record)">回复</i>
      </span>
      <span v-else-if="scope.column.key === 'tags'">
        <MailOutlined />
        {{ scope.record.tags.join(", ") }}
      </span>
    </template>
  </CommonTable>
  <a-modal
    v-model:open="applyForRemovalModal"
    class="applyForRemovalModal"
    style="
      /* background: #FFFFFF; */
      padding: 0 25px;
      height: 535px;
      width: 800px;
      box-shadow: 1px 3 8px 2px rgba(0, 0, 0, 0.08);
      border-radius: 2px 2px 2px 2px;
    "
    title="问题反馈"
    @ok="handleOk"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="选择反馈类型" name="way">
        <a-radio-group v-model:value="formState.way">
          <a-radio value="1">页面异常，打不开</a-radio>
          <a-radio value="2">账号相关问题</a-radio>
          <a-radio value="3">操作问题</a-radio>
          <a-radio value="4">功能建议</a-radio>
          <a-radio value="5">其他反馈</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="原因描述" name="cause">
        <a-textarea
          v-model:value="formState.cause"
          :rows="4"
          placeholder="请详细描述你遇到的问题"
        />
      </a-form-item>
      <a-form-item label="问题截图(格式必须为JPG或PNG)">
        <a-upload
          v-model:fileList="formState.screenshot"
          list-type="picture-card"
          :max-count="1"
        >
          <div v-if="formState.screenshot.length < 1">
            <PlusOutlined
              :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
            />
          </div>
        </a-upload>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-form-item style="text-align: center">
        <a-button
          htmlType="submit"
          style="
            margin-right: 16px;
            background-color: rgba(76, 200, 126, 1);
            border-radius: 2px 2px 2px 2px;
          "
          type="primary"
          @click="handleOk"
          >提 交</a-button
        >
        <a-button
          class="button_cancel_hover"
          style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
          @click="handleCancel"
          >取 消</a-button
        >
      </a-form-item>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import CommonTable from "../../components/myTable/index.vue";
import { cloneDeep } from "lodash";
import { MailOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, Empty } from "ant-design-vue";
const columns = [
  {
    title: "用户ID",
    dataIndex: "name",
    key: "name",
    align: "center",
    resizable: true,
    // maxWidth: 200,
    // minWidth: 75,
    width: 100,
    sorter: false,
  },
  {
    title: "1游戏名称",
    width: 100,
    dataIndex: "age",
    align: "center",
    key: "age",
  },
  {
    title: "1反馈时间",
    dataIndex: "address",
    align: "center",
    key: "tags",
    width: 100,
  },
  {
    title: "1反馈类型",
    align: "center",
    dataIndex: "address",
    key: "2",
    width: 100,
  },
  {
    title: "1问题描述",
    dataIndex: "address",
    align: "center",
    key: "3",
    width: 100,
  },
  {
    title: "1反馈信息",
    align: "center",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "action",
    align: "center",
    resizable: true,
    // maxWidth: 200,
    minWidth: 75,
    width: 100,
    sorter: false,
  },
];

const dataSource = ref(
  Array.from({ length: 100 }, (_, i) => ({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ["cool", "teacher"],
  }))
);

const isLoading = ref(false);
const commonTable = ref(null);

const getPageParams = (start, length) => {
  console.log("分页数据：", start, length);
};

const getSelectColumn = (rows) => {
  console.log("选择的数据：", rows);
};

const getTableSort = (sorter) => {
  if (sorter.order) {
    console.log(
      sorter.order === "ascend" ? "升序" : "降序",
      "排序表头字段：",
      sorter.field
    );
  } else {
    console.log("默认顺序----");
  }
  console.log("排序数据：", sorter);
};

const onView = (item) => {
  console.log("View item:", item);
  applyForRemovalModal.value = true;
};

const onDelete = (key) => {
  dataSource.value = dataSource.value.filter((item) => item.key !== key);
};

const handleAdd = () => {
  const newData = {
    key: `${dataSource.value.length}`,
    name: `Edward King ${dataSource.value.length}`,
    age: 32,
    address: `London, Park Lane no. ${dataSource.value.length}`,
  };
  dataSource.value.push(newData);
};

// 弹框
const formRef = ref();
const formState = reactive({
  way: "",
  cause: "",
  screenshot: [],
});
const rules = {
  way: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  cause: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
};
const applyForRemovalModal = ref(false);
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState, toRaw(formState));
      applyForRemovalModal.value = false;
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch((error) => {
      console.log("error", error);
    });
  console.log(111, "addM");
};
const handleCancel = () => {
  applyForRemovalModal.value = false;
  formRef.value.resetFields();
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
